<template>
  <div :class="collapsed ? 'collapsed' : 'collapse'">
    <div class="hnzb-logo-box">
      <div class="logo"></div>
    </div>
      <a-menu class="menubar" @click="click" :defaultOpenKeys="[defaultOpenKeys]" :defaultSelectedKeys="[defaultSelectedkeys]"
      mode="inline" theme="dark" :inlineCollapsed="collapsed">
        <template v-for="item in menu">
          <a-sub-menu v-if="item.children" :key="item.path">
            <span slot="title" :key="item.path"><a-icon :type="item.icon" /><span>{{item.name}}</span></span>
            <template v-for="it in item.children">
                  <a-menu-item :key="it.path">
                    <a-icon :type="it.icon"></a-icon>
                    <span>{{it.name}}</span>
                  </a-menu-item>
            </template>
          </a-sub-menu>
          <a-menu-item v-else :key="item.path">
            <a-icon :type="item.icon"></a-icon><span>{{item.name}}</span>
          </a-menu-item>
        </template>
      </a-menu>
    </div>
</template>
<script>
import sideMenu from '../assets/js/menuBar'
export default {
  name: 'MenuBar',
  inject: ['reload'],
  data () {
    return {
      defaultOpenKeys: '',
      defaultSelectedkeys: ''
    }
  },
  computed: {
    menu () {
      return sideMenu
    },
    collapsed () {
      return this.$store.state.collapsed
    }
  },
  methods: {
    click ({ item, key, keyPath }) {
      this.$route.path === key ? this.reload() : this.$router.push(key)
    }
  }
  // watch: {
  //   '$route.path': {
  //     handler (val, oldVal) {
  //       let subPath = ""
  //       const arr = val.split('/')
  //       arr[2] ? (subPath = '/' + arr[1] + '/' + arr[2]) : (subPath = '/' + arr[1])
  //       //this.defaultOpenKeys = '/' + arr[1]
  //       //this.defaultSelectedkeys = subPath
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // }
}
</script>
<style lang="less" scoped>
.collapse {
  width: 256px;
  min-height: 100%;
}
.collapsed {
    width: 80px;
    height: 100%;
  }
.menubar {
  height: 100%;
  min-height: 100vh;
}
</style>
